<template>
	<view>
		<!-- 收获地址 -->
		<view class="take-address">
			<view class="take-address-left">
				<view class="take-user">
					{{address[0].name}} {{address[0].tel}}
					<text style="border: 1rpx solid #FFFFFF;" v-if="address[0].defualt_true">
						默认
					</text>
				</view>
				<view class="address">
					{{address[0].address}} {{address[0].detail_address}}
				</view>
			</view>
			<view class="iconfont icon-you" style="margin-left: auto;width: 50rpx;" @tap="selectAddress"></view>
		</view>
		<!-- 商品 -->
		<view class="goods">
			<v-block v-for="(item,index) in goods" :key="index">
				<view class="goods-item">
					<view class="item-left">
						<image :src="item.defaultImage" mode=""></image>
						<view class="name-attr-price">
							<view class="name">{{item.skuName}}</view>
							<view class="attr">
								<text style="color: #CCCCCC;" v-for="(val,key) in item.skuAttrItems">{{val}}</text>
							</view>
							<view class="price">￥{{item.price}}</view>
						</view>
					</view>
					<view class="goods-right">
						数量：<text>{{item.payNum}}</text>
					</view>
				</view>
			</v-block>
		</view>
		<linex></linex>
		<view class=" font-size-30" style="margin-bottom: 120rpx;">
			<view class=" padding-x-20 line-money flex justify-between  flex-align-items" style="height: 100rpx; border-bottom: 1rpx solid #F1F1F1;">
				<text>商品总价</text>
				<text class="main-text-color font-weight-700">￥200</text>
			</view>
			<view class=" padding-x-20 line-money flex justify-between  flex-align-items" style="height: 100rpx; border-bottom: 1rpx solid #F1F1F1;">
				<text>运费</text>
				<text class="">包邮</text>
			</view>
			<view class=" padding-x-20 line-money flex justify-between  flex-align-items" style="height: 100rpx; border-bottom: 1rpx solid #F1F1F1;">
				<text>优惠券</text>
				<navigator url="../order-coupon/order-coupon">
				<view class="text-color-h">
					<text class="padding-x-10">无可用</text>
					<text class="iconfont icon-you font-size-20"></text>
				</view>
				</navigator>
			</view>
			<view class=" padding-x-20 line-money flex justify-between  flex-align-items" style="height: 100rpx; border-bottom: 1rpx solid #F1F1F1;">
				<text>小计</text>
				<text class="main-text-color font-weight-700">￥20</text>
			</view>
			<view class=" padding-x-20 line-money flex justify-between  flex-align-items" style="height: 100rpx; border-bottom: 1rpx solid #F1F1F1;">
				<text>发票</text>
				<view class="text-color-h">
					<text class="padding-x-10">电子发票</text>
					<text class="iconfont icon-you font-size-20"></text>
				</view>
			</view>
		</view>
		<view class="flex justify-between flex-align-items" style="height: 120rpx; padding:0 30rpx; position: fixed;left: 0rpx; bottom: 0rpx; background-color: #FFFFFF; border-top: 1rpx solid #F1F1F1; width: 100%;">
			<view class="flex flex-align-items justify-content">
				合计：<text class="font-size-30 main-text-color">￥300</text>
			</view>
			<view class="flex" style="justify-content: center;width: 300rpx; margin-right: 50rpx;">
				<view type="error" style="background-color: #FD6801;color: #FFFFFF;border-radius: 50rpx; width: 100%;padding: 15rpx; text-align: center;" @tap="toPayMethods">提交订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				goods: []
			}
		},
		computed: {
			...mapGetters({
				address: "getDefaultAddress"
			})
		},
		onLoad(option) {
			if (option.goods) {
				console.log(option)
				this.goods = JSON.parse(option.goods)
				console.log(this.goods)
			}
			
			if (this.address.length == 0) {
				this.selectAddress();
			}
			
			// 自定义事件 用来做页面之间的通讯。用来选择收获地址
			uni.$on('chooseAddress',(res)=>{
				console.log(res)
			})
		},
		/**
		 * 监听页面卸载事件
		 */
		onUnload() {
			/* 页面卸载关闭自定义事件 */
			uni.$off('chooseAddress',()=>{
				console.log("关闭监听收获地址.............................................................")
			})
		},

		methods: {
			selectAddress() {
				uni.navigateTo({
					url: "../take-address/take-address?param=1"
				})
			},
			toPayMethods(){
				uni.navigateTo({
					url:"../pay-method/pay-method"
				})
			}
		}
	}
</script>

<style lang="less">
	.take-address {
		background-color: #FD6801;
		color: #FFFFFF;
		height: 250rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;

		.take-user {
			font-size: 30rpx;
			font-weight: 700;

			text {
				padding: 0 20rpx;
				margin-left: 20rpx;
				border-radius: 10rpx;
				font-size: 25rpx;
			}
		}

		.address {}
	}

	.goods {
		width: 100%;
		background-color: #FFFFFF;
		margin-top: -50rpx;
		padding-bottom: 20rpx;
		border-radius: 20rpx;
		// 为什么设置overflow: hidden就能盖住其他的元素了？
		//因为div默认宽度是100%，若不给div高度那么他的高度就是0，「即使div里面有子元素，该div的高度依然是0」
		//父元素overflow:hidden;后，首先会计算height: auto;的真实高度，需要包含子元素，所以高度不是0，而是子元素高度。
		//这时候div就有高度了，他的高度就是子元素填充的内容
		overflow: hidden;

		.goods-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 20rpx;
			padding-top: 30rpx;
			// border-bottom: 1rpx solid #F1F1F1;
			.item-left{
				display: flex;
				align-items: center;
				image{
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
				.name-attr-price{
					padding-left: 20rpx;
					padding-right: 20rpx;
					.name{
						font-size: 30rpx;
						font-weight: 700;
					}
					.price{
						color: #FD6801;
						font-size: 30rpx;
						font-weight: 700;
					}
				}
			}
			.goods-right{
				font-size: 25rpx;
				color: #CCCCCC;
			}
		}
	}
</style>
